'use client'

import './avatar.css'

import { UserOutlined } from '@ant-design/icons'
import Image from 'next/image'
import { Tooltip } from 'antd'

function TagContainer({ tag }) {
    if (typeof tag === 'string' && tag.length > 0) {
        return (
            <div className='flex justify-center'>
                <span className='tag'>
                    { tag }
                </span>
            </div>
        )
    }

    return null
}

function NameContainer({ name, url, tag, size }) {
    if (typeof name === 'string') {
        if (!url) {
            return (
                <div 
                    className={`${size <= 40 ? 'text-xs' : 'text-sm'} px-2 py-1 text-center`}
                    style={{
                        width: size <= 40 ? `${13 * 4}px` : `${14 * 4}px`,
                    }}
                >
                    <span>{ name }</span>
                </div>
            )
        }

        if (typeof url === 'string') {
            return (
                <a 
                    className={`${size <= 40 ? 'text-xs' : 'text-sm'} text-center visited:text-purple-600 no-underline hover:underline underline-offset-2 cursor-pointer`}
                    href={`/association-graph/${url}?name=${name}&tab=profile`}
                    style={{
                        width: size <= 40 ? `${13 * 4}px` : `${14 * 4}px`,
                    }}
                >
                    <span>{ name }</span>
                </a>
            )
        }
    }

    return null
}

function NoteContainer ({ note, size }) {
    if (typeof note === 'string') {
        return (
            <Tooltip title={note} color='#34b7b9'>
                <div 
                    style={{ width: `${size}px` }} 
                    className={`break-words text-gray-400 text-xs text-center line-clamp-1`}
                >
                    <span>{ note }</span>
                </div>
            </Tooltip>
        )
    }

    if (Array.isArray(note) && note[0]) {
        return (
            <Tooltip title={`${note.join()}`} color='#34b7b9'>
                <div 
                    style={{ width: `${size}px` }} 
                    className={`break-words text-gray-400 text-xs text-center line-clamp-1`}
                >
                    <span>{ note }</span>
                </div>
            </Tooltip>
        )
    }

    return null
}

export default function Avatar({
    size, 
    tag, 
    name,
    url,
    note,
    key,
    avatarUrl,
}) {

    return (
        <div className='flex flex-col items-center'>
            <div>
                {typeof avatarUrl === 'string' && avatarUrl.length > 0
                    ? (
                        <img
                            src={avatarUrl}
                            alt={name}
                            style={{
                                border: `1px solid rgb(209 213 219)`,
                                borderRadius: '6px',
                                width: `${size * 0.81}px`,
                                height: `${size}px`,
                            }}
                        />
                    )
                    : (
                        <UserOutlined
                            style={{
                                fontSize: size,
                                border: `1px solid rgb(209 213 219)`,
                                borderRadius: '6px',
                            }}
                        />
                    )
                }
            </div>
            {/* <TagContainer tag={tag}/> */}
            <NameContainer name={name} url={url} tag={tag} size={size}/>
            <NoteContainer note={note} size={size} />
        </div>
    )
}